<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,html{margin:0;}
        /* ----进入前效果----- */
        /* 进入前封皮wrapper效果 */
        .k-dialog-enter{
            opacity:0;
        }
        /* 进入前遮罩效果 */
        .k-dialog-overlay-enter{
            opacity:0;
        }
        /*进入前弹框效果*/
        .k-dialog-enter .k-dialog{
            transform: scale(.6);
        }
        /* -----进入结束后----- */
        /*进入结束后封皮wrapper效果*/
        .k-dialog-enter-to{
            opacity:1;
        }
        /* 进入结束后遮罩效果 */
        .k-dialog-overlay-enter-to{
            opacity: 0.4;
            background-color:#000000;
        }
        /* 进入结束后弹框效果 */
        .k-dialog-enter-to .k-dialog{
            transform: scale(1);
        }
        /*进入过程的过渡函数*/
        .k-dialog-transition-enter,.k-dialog-overlay-transition-enter{
            -webkit-transition: opacity .45s cubic-bezier(.23,1,.32,1);
            transition: opacity .45s cubic-bezier(.23,1,.32,1); 
        }
        .k-dialog-enter .k-dialog,.k-dialog-enter-to .k-dialog{
            -webkit-transition: -webkit-transform .45s cubic-bezier(.23,1,.32,1);
            transition: transform .45s cubic-bezier(.23,1,.32,1);
        }
        /* 封皮wrapper样式 */
        .k-dialog-wrapper{
            position: fixed;
            left:0;
            right:0;
            bottom:0;
            top:0;
            display:flex;
            align-items: center;
            justify-content:center;
            /* 
             * display:-webkit-box;
             * box-pack:center;//水平居中
	         * box-align:center;//垂直居中
             *
            */
        }
        /* 弹框样式 */
        .k-dialog{
            width:90%;
            max-width:360px;
            border-radius:2px;
            background-color:#FFFFFF;
            -webkit-box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
            box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
        }
        
        
        .k-dialog .k-dialog-title,.k-dialog .k-dialog-body{
            padding:15px;
        }
        .k-dialog-title+.k-dialog-body{
            padding-top:0
        }
        .k-dialog-overlay{
            position:fixed;
            left:0;
            right:0;
            bottom:0;
            top:0;
        }
        
        .k-dialog-action{
            min-height:48px;
            padding:8px;
        }
        
        .hz-tip{
            position: fixed;
            top: 45%;
            left: 50%;
            transform: translate3d(-50%,-50%,0);
            color: #FFFFFF;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="app">

    </div>
    <div class="div">div</div>
    <div class="div">div</div>
    <div class="div">div</div>
    <div class="div">div</div>
    <div class="div">div</div>
    <div class="div">div</div>
    <div class="div">div</div>
    <div class="div">div</div>
    <div class="div">div</div>
    <div class="hz-tip">复值成功</div>
    <button type="button" id="layer">弹框</button>
    <script src="./dialog.js"></script>
    <script>
        document.querySelector("#layer").addEventListener('click',function(){
            dialog({
                isEnableShade:true
                ,title:'弹框标题'
                ,content:  `
                谢佳佳是笨蛋 
                `
            })
        })
    </script>
</body>
</html>